<template>
  <el-card header="Log Block Records" class="mb-5">    
    <el-table :data="dataTable" :show-header="true" :highlight-current-row="true" :stripe="true" row-class-name="primary" style="width: 100%" @row-click="onTableRowClicked">
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <el-table :data="props.row.detail" @row-click="onTableRowClicked">
              <el-table-column type="expand">
                <template #default="props">
                  <div m="4">
                    <el-table :data="props.row.detail" @row-click="onTableRowClicked">
                      <el-table-column prop="label" label="label"></el-table-column>
                      <el-table-column prop="value" label="value"></el-table-column>
                      <el-table-column prop="desc" label="desc"></el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="label" label="label"></el-table-column>
              <el-table-column prop="value" label="value"></el-table-column>
              <el-table-column prop="desc" label="desc"></el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="refname" label="refname"></el-table-column>
      <el-table-column prop="position" label="position"></el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import Formater from "@/libs/tools/Formater.js";
export default {
  props: {
    data: Object,
    debug: Object,
  },
  data() {
    return {
      dataTable: [],
    };
  },
  created() {
    if (this.data) {
      this.dataTable = this.covertToTable(this.data);
    }    
  },
  watch: {
    data(newVal, oldVal) {
      this.dataTable = this.covertToTable(newVal);
    },
  },
  methods: {    
     covertToTable(data) {
      let dataTable = [];
      for (let i = 0; i < data.length; i++) {
        let item = data[i];
        let itemTable = {
          refname: item.refname.fullname,
          updateIndex: Formater.number(item.refname.updateIndex),
          debug: this.debug.arr[i],
          detail: [
            {
              label: "log_key_prefix_length",
              value: item.logKeyPrefixLength.value,
              debug: item._debug.logKeyPrefixLength,
              desc: "",
            },
            {
              label: "log_key_prefix_bytes",
              value: item.refname.prefixBytes,
              debug: item._debug.logKeyPrefixLength,
              desc: "",
            },
            {
              label: "log_key_suffix_length",
              value: item.logKeySuffixLength,
              debug: item._debug.logKeySuffixInfo,
              desc: "",
            },
            {
              label: "log_key_suffix_bytes",
              value: item.refname.suffixBytes,
              debug: item._debug.refname,
              desc: "",
            },
            {
              label: "log_value_type",
              value: Formater.number(item.logValueType),
              debug: item._debug.logKeySuffixInfo,
              desc: "",
            },
            {
              label: "log_data",
              value: Formater.number(item.logData),
              debug: item._debug.logData,
              desc: "",
              detail: [
                {
                  label: "old_id",
                  value: Formater.hash(item?.logData?.oldId),
                  debug: item?.logData._debug.oldId,
                  desc: "",
                },
                {
                  label: "new_id",
                  value: Formater.hash(item?.logData?.newId),
                  debug: item?.logData._debug.newId,
                  desc: "",
                },
                {
                  label: "name_length",
                  value: Formater.number(item?.logData?.nameLength.value),
                  debug: item?.logData._debug.nameLength,
                  desc: "",
                },
                {
                  label: "name",
                  value: item?.logData?.name,
                  debug: item?.logData._debug.name,
                  desc: "",
                },
                {
                  label: "email_length",
                  value: Formater.number(item?.logData?.emailLength.value),
                  debug: item?.logData._debug.emailLength,
                  desc: "",
                },
                {
                  label: "email",
                  value: item?.logData?.email,
                  debug: item?.logData._debug.email,
                  desc: "",
                },
                {
                  label: "time_seconds",
                  value: Formater.number(item?.logData.timeSeconds.value),
                  debug: item?.logData._debug.timeSeconds,
                  desc: "",
                },
                {
                  label: "tz_offset",
                  value: item?.logData.tzOffset,
                  debug: item?.logData._debug.tzOffset,
                  desc: "",
                },
                {
                  label: "message_length",
                  value: Formater.number(item?.logData.messageLength.value),
                  debug: item?.logData._debug.messageLength,
                  desc: "",
                },
                {
                  label: "message",
                  value: item?.logData.message,
                  debug: item?.logData._debug.message,
                  desc: "",
                },
              ]
            }
          ]
        }
        dataTable.push(itemTable);
      }
      return dataTable;
    },

    onTableRowClicked(row, column, event) {
      this.$emit('clicked', row);
    },
  },
  mounted() {

  },
  computed: {
    
  }
};
</script>